<template>
    <div class="order">
        <div v-if="Data.list && Data.list.length">
            <div class="table-header" :style="{ paddingRight: Data.paddingRight }">
                <div class="table-header-con">
                    <div class="table-header-item" v-for="(item, index) in Data.tableHeader" :key="index">
                        {{ item.label }}
                    </div>
                </div>
                <div class="order-item-bg"></div>
            </div>
            <el-scrollbar ref="scrollbarRef" class="table-container" max-height="350px">
                <div v-for="(item, index) in Data.list" :key="index">
                    <div class="order_title" :style="{ marginTop: index === 0 ? 0 : '15px' }">
                        <div class="order_title_left">
                            <div class="order_title_left_text">订单号：{{ item.orderSn }}</div>
                            <div v-if="[3, 4, 5].includes(item.orderType)" class="sign">拼</div>
                            <div v-if="item.orderType === 6" class="sign-jifen">积分商城</div>
                        </div>
                        <div class="order_title_right">
                            <div class="order_title_right_text">下单时间：{{ item.createdAt }}</div>
                        </div>
                    </div>
                    <el-table
                        width="100%"
                        :span-method="e => objectSpanMethod(e, index)"
                        :data="item.goods"
                        size="small"
                        border
                        :show-header="false">
                        <el-table-column label="商品信息" min-width="200">
                            <template #default="{ row }">
                                <div class="goods_box">
                                    <div class="goods_left">
                                        <el-image class="goods_left_img" :src="row.goodsImg" />
                                    </div>
                                    <div class="goods_right">
                                        <div class="goods_right_top">
                                            <el-tooltip effect="dark" :content="row.goodsName" placement="top-start">
                                                <span>{{ row.goodsName }}</span>
                                            </el-tooltip>
                                        </div>
                                        <div class="goods_right_center" v-for="(el, idx) in row.skuExtInfo" :key="idx">
                                            {{ el.keyAttributeName }}：{{ el.attributeValue }}
                                        </div>
                                        <div class="goods_right_bottom">
                                            <div class="goods_right_bottom_money">
                                                ￥{{ floatDivide(row.goodsPrice, 100) }}
                                            </div>
                                            <div class="goods_right_bottom_count">X{{ row.buyNum }}</div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" width="120">
                            <template #default>
                                <div class="real_money">
                                    <div class="real_money_text">￥{{ floatDivide(item.amountTotal, 100) }}</div>
                                    <div class="real_money_desc">
                                        {{
                                            !(item.logisticsFee + item.freeFreightFee)
                                                ? '免运费'
                                                : '含运费: ￥' +
                                                  floatDivide(item.logisticsFee + item.freeFreightFee, 100)
                                        }}
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" width="120">
                            <template #default>
                                <div class="table_column_text">{{ item.shopName }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="订单状态" width="100">
                            <template #default>
                                <div class="table_column_text">
                                    {{ translateOrderCode(item.orderStatus, item.isSelfPickup) }}
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-scrollbar>
            <Pagination
                :total="total"
                :page-size="params.pageSize"
                :current-page="params.pageNum"
                @sizeChange="changeSizeHandler"
                @pageChange="changePageHandler" />
        </div>
        <div v-else class="empty_table">
            <img style="width: 50%" src="@/assets/imgs/logo/default.png" />
            <div class="empty-content">暂无订单数据</div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, nextTick, onMounted } from 'vue';
import Pagination from '@/components/Pagination.vue';
import request from '@/request/index';
import { useRoute } from 'vue-router';
import { floatDivide, translateOrderCode } from '@/commons/utils.js';
const route = useRoute();
let params = {
    pageNum: 1,
    pageSize: 10,
    memberId: route.query.id
};
let total = ref(0);
let Data = reactive({
    list: [],
    tableHeader: [{ label: '商品信息' }, { label: '实付金额' }, { label: '下单店铺' }, { label: '订单状态' }],
    paddingRight: 0
});
const scrollbarRef = ref(null);
const initTableData = () => {
    params.pageNum = 1;
    queryTableData();
};
const queryTableData = async () => {
    const res = (await request('memberOrderServ', params)) || {};
    const { list, totalCount } = res.data || {};
    Data.list.length = 0;
    Data.list.push(...list);
    total.value = totalCount || 0;
    await nextTick();
    scrollbarRef.value?.setScrollTop(0);
};

const changePageHandler = page => {
    params.pageNum = page;
    queryTableData();
};

const changeSizeHandler = pageSize => {
    params.pageNum = 1;
    params.pageSize = pageSize;
    queryTableData();
};

const objectSpanMethod = ({ rowIndex, columnIndex }, index) => {
    if ([1, 2, 3].includes(columnIndex)) {
        let row = 0;
        Data.list.map(el => {
            if (el?.goods?.length > row) {
                row = el.goods.length;
            }
        });
        if (rowIndex % row === 0) {
            return {
                rowspan: row,
                colspan: 1
            };
        } else {
            return {
                rowspan: 0,
                colspan: 0
            };
        }
    }
};
onMounted(initTableData);
</script>

<style lang="scss" scoped>
@import '../../../../assets/scss/mixin.scss';
.order {
    .table-container {
        max-height: 350px;
        overflow: auto;
        .order_title {
            display: flex;
            justify-content: space-between;
            padding: 18px 16px;
            border: 1px solid #eaeaea;
            border-bottom: none;
            background: #f9f9f9;
            margin-top: 15px;
            &:nth-child(1) {
                margin-top: 0;
            }
            .order_title_left {
                display: flex;
                align-items: center;
                .order_title_left_text {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #33302d;
                    line-height: 20px;
                }
                .sign {
                    width: 16px;
                    height: 16px;
                    margin-left: 3px;
                    background: #ff6b00;
                    border-radius: 2px;
                    text-align: center;
                    line-height: 16px;
                    font-weight: 600;
                    font-size: 12px;
                    color: #ffffff;
                    display: inline-block;
                }
                .sign-jifen {
                    margin-left: 5px;
                    color: #ff6b00;
                    height: 22px;
                    width: 62px;
                    font-size: 12px;
                    background: #fffaf9;
                    border-radius: 2px;
                    border: 1px solid #facaa8;
                    display: inline-block;
                    line-height: 22px;
                    text-align: center;
                }
            }
            .order_title_right {
                .order_title_right_text {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #33302d;
                    line-height: 20px;
                }
            }
        }
        .goods_box {
            display: flex;
            height: 100px;
            margin-left: 8px;
            .goods_left {
                margin-right: 8px;
                .goods_left_img {
                    width: 100px;
                    min-width: 100px;
                    height: 100px;
                }
            }
            .goods_right {
                flex: 1;
                display: flex;
                flex-direction: column;
                .goods_right_top {
                    margin-top: 2px;
                    height: 32px;
                    font-size: 14px;
                    font-family: STHeitiSC-Light, STHeitiSC;
                    font-weight: 300;
                    color: #33302d;
                    line-height: 16px;
                    @include text-ellipsis(2);
                }
                .goods_right_center {
                    height: 46px;
                    font-size: 14px;
                    font-family: STHeitiSC-Light, STHeitiSC;
                    font-weight: 300;
                    color: #969696;
                    line-height: 16px;
                }
                .goods_right_bottom {
                    display: flex;
                    justify-content: space-between;

                    .goods_right_bottom_money {
                        font-size: 14px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #33302d;
                        line-height: 20px;
                    }
                    .goods_right_bottom_count {
                        font-size: 14px;
                        font-family: STHeitiSC-Light, STHeitiSC;
                        font-weight: 300;
                        color: #33302d;
                        line-height: 14px;
                    }
                }
            }
        }
        .real_money {
            .real_money_text {
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #33302d;
                line-height: 20px;
            }
            .real_money_desc {
                margin-top: 6px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #969696;
                line-height: 14px;
            }
        }
        .table_column_text {
            font-size: 14px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #33302d;
            line-height: 14px;
        }
    }

    .table-header {
        border-bottom: none;
        font-size: 14px;
        font-weight: 600;
        color: #33302d;
        line-height: 14px;
        margin-bottom: 15px;
        .table-header-con {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 48px;
            background: #f9f9f9;
        }
        .table-header-item {
            text-align: center;
            flex: 1;
            font-size: 14px;
            font-family: STHeitiSC-Medium, STHeitiSC;
            font-weight: 500;
            color: #33302d;
        }
        .table-header-item:nth-child(1) {
            padding-left: 16px;
            // min-width: 400px;
            // max-width: 400px;
            text-align: left;
            box-sizing: content-box;
        }
        .table-header-item:nth-child(2) {
            min-width: 120px;
            max-width: 120px;
            text-align: center;
        }
        .table-header-item:nth-child(3) {
            min-width: 120px;
            max-width: 120px;
            text-align: center;
        }
        .table-header-item:nth-last-child(1) {
            text-align: center;
            min-width: 100px;
            max-width: 100px;
        }
    }
    .empty_table {
        padding: 50px 25px;
        min-height: 300px;
        text-align: center;
        margin: auto;
        .empty-content {
            height: 20px;
            font-size: 13px;
            color: #969696;
            line-height: 20px;
        }
    }
}
</style>
